<template>
  <view class="pageContent">
    <view class="member" v-if="1" @click="detailMem(index)" v-for="(item,index) in headList" :key="index">
      <view class="memberHead" v-if="index==0">
        <view class="ellipsisOne memberHeadPro">{{item.projectName}}</view>
        <view class="memberHeadAdd" v-if="index==0&&(item.roleId==16||item.roleId==17)" @click.stop="addMem(index)">添加成员</view>
      </view>
      <view class="memberMid">
        <view class="memberMidLeft">
          <image class="avatar" :src="item.portraitUrl || images +'/avatar.png'" mode="widthFix"/>
          <view class="userTypeMain"><text class="userType">{{item.roleName || '角色'}}</text></view>
        </view>
        <view>
          <view class="memberMsg">
            <view class="memberName textJustify">姓名</view><view class="memberNameVal">：{{item.name}}</view>
          </view>
          <view class="memberMsg">
            <view class="memberName textJustify">手机号</view><view class="memberNameVal">：{{item.telephone}}</view>
          </view>
          <view class="memberMsg">
            <view class="memberName textJustify">门禁期限</view><view class="memberNameVal">：{{item.expireDate || '永久有效'}}</view>
          </view>

          <block v-if="index== 0 && (item.roleId==16 || item.roleId==17)">
            <view class="handlerCha "></view>
            <!-- <view class="handlerCha handlerBlu" @click.stop="updateMem(index)">修改</view> -->
          </block>
          <block v-else>
            <view class="handlerCha handlerEpt" @click.stop="updateMem(index)">修改</view>
            <view class="handlerCha handlerBlu" @click.stop="cancleHandle(index)">关闭帐户</view>
          </block>
        </view>
      </view>

    </view>
    <view class="houseMain" v-if="0" @click="detailMem(index)" v-for="(item,index) in headList" :key="index">
      <view class="houseTil">
        <view>{{item.projectName || '项目名称'}}</view>
        <!-- <view>创建日期</view> -->
      </view>
      <view class="houseNo">
        <view>{{item.roomInfo+'-'+room.roomName}}</view>
        <view class="houseMes">
          <view class="houseMesIt">{{item.telephone}}</view>
          <view class="houseMesIt">{{item.name}}</view>
          <view class="houseMesIt">{{item.expireDate || '永久有效'}}</view>
        </view>
      </view>
      <view class="handler" >
        <block v-if="userMsg.roleId==17 && item.roleId==17">
          <view class="handlerCha "></view>
          <!-- <view class="handlerCha handlerBlu" @click.stop="updateMem(index)">修改</view> -->
        </block>
        <block v-else>
          <!-- <view class="handlerCha" @click.stop="updateMem(index)">修改</view> -->
          <view class="handlerCha" @click.stop="cancleHandle(index)">关闭帐户</view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      headList: [],
      room: '',
      roomItem: '',
      userMsg: '',
      projectName:'湘江世纪城-一期-3栋-2004室-2008',
    }
  },
  computed: {
    ...mapState({
      // myInfo: state => state.user.myInfo
    })
  },
  onLoad(){
    console.warn('projectName.length=',this.projectName.length)
  },
  onShow(){
    var room = wx.getStorageSync('room');
    this.room=room;
    var userMsg = wx.getStorageSync('userMsg');
    this.userMsg=userMsg;
    this.roomMembers();
    util.socketTest();
  },
  methods: {
    detailMem(index) {
      console.warn("===detailMem",index)
      var item=this.headList[index];
      var json=JSON.stringify(item)
      wx.navigateTo({url:'/pages/subMe/detailMem/main?json=' + json})
    },
    //修改用户
    updateMem(index) {
      this.roomItem=this.headList[index];
      var item=this.headList[index];
      var json=JSON.stringify(item)
      wx.navigateTo({url:'/pages/subMe/addMem/main?json=' + json})
    },
    cancleHandle(index){
      this.roomItem=this.headList[index];
      this.onShowModal();
    },
    roomMembers(){
      wx.showLoading({ title: '', mask: true,duration:500 })
      // var params={roomId :this.room.roomId}
      var params={}
      util.wxRequestPro('/UserServer/owner/info/roomMembers',params)
      .then((res)=>{
        console.warn('roomMembers',res)
        var param=res.param;
        this.headList=param
      }).catch((res)=>{
        if(res.statusCode==400) {
          wx.showToast({
              title: res.statusInfo,
              icon: 'none'
          })
        }
      })
    },
    onShowModal(){
      var self=this;
      wx.showModal
      ({
        title: '用户提示',
        content: '关闭后该账户将停止一切功能使用，数据无法再恢复，是否确定要关闭吗？',
        cancelColor: "#999999",
        confirmColor: "#1086FF",
        confirmText: '关闭',
        cancelText: '取消',
        success (res) {
          if (res.confirm) {
            self.closeAccount();
          } else if (res.cancel) {

          }
        }
      })
    },
    closeAccount() {
      var room =this.roomItem;
      var params={
        ownerId:room.ownerId,
        roomId:room.roomId,
      }
      var paramUrl=util.stringifyQs(params)
      util.wxRequestPro('/UserServer/owner/info/closeAccount?'+paramUrl,{},'PUT')
      .then((res)=>{
        console.warn('closeAccount',res)
        wx.showToast({
          title: '关闭成功',
          icon: 'none'
        })
        this.roomMembers();
      })
    },
    //进行添加成员的操作
    addMem(index){
      wx.showLoading({ title: '', mask: true,duration:800 })
      var item=this.headList[index]
      wx.navigateTo({url:'/pages/subMe/addMem/main'})
    },
  }
}
</script>

<style lang="stylus" scoped>
.pageContent
  min-height 100vh
  background $background
  padding: 20rpx 0rpx 350rpx 0rpx;
.houseMain
  background #FFFFFF
  padding: 0rpx 14rpx 0rpx 14rpx;
  margin: 0rpx 0rpx 20rpx 0rpx;
.houseTil
  display flex
  justify-content space-between
  padding: 14rpx 14rpx 14rpx 14rpx;
  line-height: 45rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseNo
  padding: 14rpx 14rpx 14rpx 14rpx;
  font-size: 30rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseMes{
  display flex
  padding: 14rpx 0rpx 14rpx 0rpx;
}
.houseMesIt{
  line-height: 36rpx;
  background: #F2F8FF;
  border-radius: 6rpx;
  border: 1px solid #BCDEFF;
  color: #519AEE;
  font-size: 24rpx;
  margin-right 10rpx;
  padding: 0rpx 14rpx 0rpx 14rpx;
}
.handler {
  display: flex;
  justify-content: flex-end;
  padding: 14rpx 14rpx 20rpx 14rpx;
  width: 100%;
  // border 1px solid aqua
}
.handlerCha{
  display inline-block
  height: 60rpx;
  width 160rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  color: #1086FF;
  text-align center
  font-weight bold
  // padding: 0rpx 40rpx 0rpx 40rpx;
}
.handlerBlu{
  color: #FFFFFF;
  background: #1086FF;
  margin-left 18rpx
}
.handlerEpt{
  background: #FFFFFF;
  border 1rpx solid #1086FF
}

.member{
  background: #FFFFFF;
  padding: 0rpx 20rpx 0rpx 20rpx;
  margin: 0rpx 0rpx 0rpx 0rpx;
}
.pageContent>.member:first-child{
    padding: 34rpx 20rpx 0rpx 20rpx;
}
.memberHead{
  height: 40rpx;
  line-height: 40rpx;
}
.memberHeadPro{
  float: left;
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  width 560rpx;
  height: 40rpx;
  // outline: 1rpx solid #1086FF
}
.memberHeadAdd{
  float: right;
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #1086FF;

}
.memberMid{
  background: #FFFFFF;
  display:flex;
  flex-direction row;
  padding 34rpx 0rpx 30rpx 0rpx
  border-bottom: 1rpx solid #E7E7E7;
}
.memberMidLeft{
  width 230rpx
  text-align center
  // border 1px solid #666
}
.avatar
  width 148rpx
  height 148rpx
  border-radius 50%
.userTypeMain{
  padding: 10rpx 0rpx 0rpx 0rpx;
}
.userType{
  background #0053FF
  color #fff
  font-size 26rpx
  border-radius 30rpx
  padding 4rpx 20rpx 4rpx 20rpx
  margin: 0rpx 0rpx 0rpx 0rpx;
}

.memberMsg{
  display flex
  flex-direction row
  margin: 0rpx 0rpx 10rpx 0rpx;
  height 36rpx
  line-height 36rpx
  // border 1px solid #000
}
.memberName{
  width 116rpx;
  // border 1px solid #666
}
</style>
